<template>
<div class="data-manage">
  <div class="data-manage-card">
    <div class="data-manage-card-header">{{interviewTitle}}</div>
    <div class="data-manage-card-content" id="interview"></div>
  </div>
  <div class="data-manage-card">
    <div class="data-manage-card-header">{{applyTitle}}</div>
    <div class="data-manage-card-content" id="apply"></div>
  </div>
</div>
</template>

<script setup lang='ts'>
import { } from 'vue';

//引入eChart
import { onMounted} from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);


onMounted(()=>{
  //社团页面访问量
  const interviewOption: ECOption = {
  xAxis: {
    data: ['02.05', '02.06', '02.07', '02.08', '02.09','02.10','02.11']
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      data: [10, 22, 28, 43, 49,66,5],
      label:{
        show:true,
        position:'bottom'
      }
    }
  ]
};

const interview=document.getElementById('interview');
if(interview){
  const mainChart = echarts.init(interview);
  mainChart.setOption(interviewOption);
}

//社团报名量
const applyOption: ECOption = {
  xAxis: {
    data: ['02.05', '02.06', '02.07', '02.08', '02.09','02.10','02.11']
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      data: [10, 22, 28, 43, 49, 15, 80],
      label:{
        show:true,
        position:'bottom',
      }
    }
  ]
};

const apply=document.getElementById('apply');
if(apply){
  const mainChart = echarts.init(apply);
  mainChart.setOption(applyOption);
}
})


const interviewTitle='近日, 本社团页面访问量为:';
const applyTitle = '近日, 本社团报名量为:';
</script>

<style scoped lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
  "t-grey": #8a8888,
  //字体常用颜色--灰
  "t-white": #f5f5f5,
  //字体常用颜色--白
  "border": #707070
    //边框颜色
);
.data-manage{
  .data-manage-card{
    margin-bottom: 4rem;
    .data-manage-card-header{
      color: map-get($map: $colors, $key: t-blue);
      font-size: 25px;
      margin-bottom: 1rem;
    }
    .data-manage-card-content{
    // width: 1211px;
    width: 100%;
    height: 333px;
    background-color: #fff;
    border: 2px solid map-get($map: $colors, $key: border);
    box-shadow:8px 8px 15px 0px #8a8888;
}
  }
}
</style>